<template>
  <div class="circle-wrap container">
    <div class="edit-box">
      <button type="button" class="edit-btn">不可编辑</button>
    </div>

    <div class="push-box" v-html="content"></div>

    <div class="location-box">
      <img src="./location.png" class="pic1" onclick="return false"/>
      <span class="location-title">所在位置</span>
      <div class="location-con" @click="toPage">
        <span class="address">{{address}}</span>
        <img src="./down.png" class="pic2" onclick="return false"/>
      </div>
    </div>

    <div class="pic-box">
      <img src="./pic.png" class="pic3"/>
      <span class="add">添加图片</span>
    </div>

    <div class="shot-box" @click="showPic(shotPic)">
      <img :src="shotPic" class="shot"/>
    </div>

    <div class="send-box" @click="sendCircle">
      <button type="button" class="send-btn">发送</button>
    </div>

  </div>
</template>

<script>
  import {convertBase64ToBlob, getSessionStore, removeSessionStore, toDecimal} from "../../../config/util"
  import {ImagePreview} from 'vant'
  import {baseUrl} from "../../../config/env"
  import * as qiniu from 'qiniu-js'

  let map = null;

  export default {
    data() {
      return {
        shotPic: "",
        month: "",
        wage: "",
        content: this.$route.query.circleTitle,
        address: "保密",
        circlePic: "",
        circle: 0,
        mechanismName: "",
        prizeId: ""
      }
    },
    created() {
      this.circle = this.$route.query.circle;
      this.month = this.$route.query.month;
      this.wage = this.$route.query.wage;
      this.mechanismName = this.$route.query.mechanismName;
      this.prizeId = this.$route.query.prizeId;

      if (this.$route.query.address) {
        this.address = this.$route.query.address;
      } else {
        this.initMap();
      }

      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(getSessionStore("openid"));
    },
    mounted() {
      this.shotPic = getSessionStore("htmlUrl");
    },
    methods: {
      initMap() {
        let map = new AMap.Map('container', {
          resizeEnable: true
        });

        AMap.plugin('AMap.Geolocation', () => {
          let geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 10000,          //超过10秒后停止定位，默认：5s
          });
          map.addControl(geolocation);
          geolocation.getCurrentPosition((status, result) => {
            if (status == 'complete') {
              this.onComplete(result)
            } else {
              this.onError(result)
            }
          });
        });
      },
      onComplete(data) {//解析定位结果
        if (data.formattedAddress) {
          this.address = data.formattedAddress;
        }
      },
      onError(data) {
        AMap.plugin('AMap.CitySearch', () => {
          let citySearch = new AMap.CitySearch();
          citySearch.getLocalCity((status, result) => {
            if (status === 'complete' && result.info === 'OK') {
              this.address = result.city;
            }
          })
        })
      },
      showPic(pic) {//预览
        ImagePreview({
          images: [pic],
          closeOnPopstate: true
        });
      },
      toPage() {
        this.$router.push({
          path: "/searchplace",
          query: {
            "month": this.month,
            "wage": this.wage,
            "circle": this.circle,
            "prizeId": this.prizeId,
            "mechanismName": this.mechanismName,
            "circleTitle": this.content
          }
        });
      },
      sendCircle() {//发圈子
        if (this.shotPic != "data:," && this.shotPic) {
          this.$vux.loading.show({
            text: '加载中',
          });
          this.axios.get(baseUrl + "/platform/get_token?sgin=" + this.userSign).then((res) => {
            let resultObj = res.data;
            let file = convertBase64ToBlob(this.shotPic); //Blob 对象，上传的文件
            let key = null; // 上传后文件资源名以设置的 key 为主，如果 key 为 null 或者 undefined，则文件资源名会以 hash 值作为资源名。
            let config = {
              useCdnDomain: true, //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
              region: qiniu.region.z2 // 根据具体提示修改上传地区,当为 null 或 undefined 时，自动分析上传域名区域};
            };

            let putExtra = {
              fname: "", //文件原文件名
              params: {}, //用来放置自定义变量
              mimeType: null //用来限制上传文件类型，为 null 时表示不对文件类型限制；限制类型放到数组里： ["image/png", "image/jpeg", "image/gif"]
            };
            let observable = qiniu.upload(file, key, resultObj.data, putExtra, config);

            observable.subscribe({
              next: (res) => {//主要用来展示进度
                let total = res.total;
              },
              error: (err) => {//失败报错信息
                this.$vux.loading.hide();
                this.$vux.toast.text("图片上传失败，请重试", "middle");
              },
              complete: (res) => {//接收成功后返回的信息
                this.circlePic = "http://pic.lanpin123.com/" + res.hash;
                if (this.circle == 5) {
                  this.pushCircle();
                } else {
                  this.cashPrize();
                }
              }
            })
          });
        } else {
          this.$vux.toast.text("发送失败~", "middle");
        }
      },
      pushCircle() {//上传图片到七牛云
        let data = {
          "moodDetails": this.content,
          "moodUrl": this.circlePic,
          "address": this.address,
          "souce": 1
        };
        this.axios.post(baseUrl + "/mood/add_mood?sgin=" + this.userSign, data).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0) {
            if (resultObj.data == 1) {
              removeSessionStore("htmlUrl");
              this.$router.push({path: "/salary", query: {"month": this.month}});
            } else {
              this.$vux.toast.text(resultObj.msg, "middle");
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });

      },
      cashPrize() {//奖励领取
        this.$vux.loading.show({
          text: '加载中',
        });
        let data = {
          "moodDetails": this.content,
          "moodUrl": this.circlePic,
          "address": this.address
        };
        this.axios.post(baseUrl + "/billrecord/update_prize_money?sgin=" + this.userSign + "&id=" + this.prizeId + "&type=" + this.circle, data).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0) {
            if (resultObj.data >= 1) {
              this.$router.push({path: "/rewardlist", query: {"month": this.month}});
            } else {
              this.$vux.toast.text("领取失败，请稍后重试", "middle");
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
    },
    components: {
      ImagePreview
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../assets/stylus/mixin.styl"

  .circle-wrap
    wh(100%, 100%)
    background: rgba(255, 255, 255, 1)
    overflow: hidden
    .edit-box
      margin-top: 0.773rem
      margin-bottom: 0.427rem
      margin-left: 0.28rem
      .edit-btn
        wh(1.813rem, 0.48rem)
        background: rgba(255, 235, 229, 1)
        border-radius: 0.24rem
        size-color(0.347rem, rgba(255, 83, 83, 1))
        line-height: 0.48rem
    .push-box
      margin-left: 0.28rem
      margin-right: 0.32rem
      size-color(0.4rem, rgba(51, 51, 51, 1))
      line-height: 0.48rem
    .location-box
      display: flex
      align-items: center
      margin-left: 0.32rem
      wh(9.68rem, 1.333rem)
      margin-top: 2.4rem
      border-bottom: 0.027rem solid rgba(230, 230, 230, 1)
      .pic1
        wh(0.6rem, 0.6rem)
      .location-title
        margin-left: 0.213rem
        size-color(0.427rem, rgba(24, 24, 24, 1))
      .location-con
        display: flex
        margin-left: auto
        margin-right: 0.4rem
        align-items: center
        size-color(0.427rem, rgba(102, 102, 102, 1))
        .address
          text-align: right
          width: 6rem
          ellipsis()
          padding-top: 0.1rem
          padding-bottom: 0.1rem
        .pic2
          margin-left: 0.24rem
          wh(0.32rem, 0.32rem)
    .pic-box
      display: flex
      align-items: center
      margin-left: 0.32rem
      margin-bottom: 0.133rem
      wh(9.68rem, 1.333rem)
      .pic3
        wh(0.6rem, 0.6rem)
      .add
        margin-left: 0.213rem
        size-color(0.427rem, rgba(24, 24, 24, 1))
    .shot-box
      margin-left: 0.32rem
      margin-bottom: 1.787rem
      wh(3.067rem, 3.067rem)
      .shot
        wh(100%, 100%)
    .send-box
      text-align: center
      wh(100%, 1.28rem)
      .send-btn
        line-height: 1.28rem
        wh(9.04rem, 1.28rem)
        background: rgba(60, 175, 255, 1)
        border-radius(0.16rem)
        size-color(0.453rem, rgba(255, 255, 255, 1))
</style>

